import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Sidebar from './components/Sidebar';
import TopBar from './components/TopBar';
import MainContent from './components/MainContent';
import Dashboard from './pages/dashboard/Dashboard';
import Users from './pages/usersmanager/Users';
import Articles from './pages/articles/Articles';
import Activities from './pages/activities/Activities';
import Settings from './pages/settings/Settings';
import Login from './pages/login/Login';
import './App.css';

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    // 检查用户是否已登录
    const token = localStorage.getItem('userToken');
    setIsAuthenticated(!!token);
    
    // 添加一个监听器，当localStorage变化时更新认证状态
    const handleStorageChange = () => {
      const token = localStorage.getItem('userToken');
      setIsAuthenticated(!!token);
    };
    
    // 监听storage事件
    window.addEventListener('storage', handleStorageChange);
    
    // 自定义事件，用于监听同一窗口内的localStorage变化
    const originalSetItem = localStorage.setItem;
    localStorage.setItem = function(key, value) {
      originalSetItem.call(this, key, value);
      if (key === 'userToken') {
        window.dispatchEvent(new Event('storage'));
      }
    };
    
    // 自定义事件，用于监听同一窗口内的localStorage移除
    const originalRemoveItem = localStorage.removeItem;
    localStorage.removeItem = function(key) {
      originalRemoveItem.call(this, key);
      if (key === 'userToken') {
        window.dispatchEvent(new Event('storage'));
      }
    };
    
    return () => {
      window.removeEventListener('storage', handleStorageChange);
      localStorage.setItem = originalSetItem;
      localStorage.removeItem = originalRemoveItem;
    };
  }, []);

  return (
    <Router>
      <div className="App">
        <Routes>
          <Route 
            path="/login" 
            element={isAuthenticated ? <Navigate to="/" /> : <Login />} 
          />
          <Route 
            path="/*" 
            element={
              isAuthenticated ? (
                <>
                  <TopBar />
                  <div className="appContainer">
                    <Sidebar />
                    <MainContent>
                      <Routes>
                          <Route path="/" element={<Navigate to="/home" />} />
                          <Route path="/home" element={<Dashboard />} />
                          <Route path="/users" element={<Users />} />
                          <Route path="/articles" element={<Articles />} />
                          <Route path="/activities" element={<Activities />} />
                          <Route path="/settings" element={<Settings />} />
                          <Route path="*" element={<Navigate to="/home" />} />
                        </Routes>
                    </MainContent>
                  </div>
                </>
              ) : (
                <Navigate to="/login" />
              )
            } 
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;
